<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>人员分析</title>
  <script src="../../../static/kaige/js/szload.js"></script>
  <style>
    .analyse_echarts {
      width: 800px;
      height: 600px;
    }
  </style>
</head>

<body>
  <div class="kaige-body">
    <div class="analyse_echarts" id="analyse_echarts"></div>
  </div>
  <script>
    load_init_js([
      szoapcpath + '/static/kaige/js/date.js',
      szoapcpath + '/static/kaige/js/search.js',
      szoapcpath + '/static/lib/Convert_Pinyin.js',
      szoapcpath + '/static/kaige/js/xm-select.js',
    ], function () {
      layui.config({
        base: szoapcpath + '/static/kaige/layuiextend/'
      }).extend({
        echarts: 'echarts/echarts',
        echartsTheme: 'echarts/echartsTheme',
      }).use(['element', 'table', 'kaige', 'echarts', 'echartsTheme'], function () {
        var $ = layui.jquery, table = layui.table, kaige = layui.kaige, element = layui.element,
          echarts = layui.echarts, echartsTheme = layui.echartsTheme;

        // 指定图表的配置项和数据
        var option = {
          title: {
            text: '按部门人员分析',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['总经办', '市场部', '研发部', '财务部', '办公室']
          },
          series: [
            {
              name: '部门',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [
                { value: 5, name: '总经办' },
                { value: 12, name: '市场部' },
                { value: 8, name: '研发部' },
                { value: 3, name: '财务部' },
                { value: 6, name: '办公室' }
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        var myChart = echarts.init(document.getElementById('analyse_echarts'));
        myChart.setOption(option);
      });
    });
  </script>
</body>

</html>